<template>
  <div class="table-page">
    <!-- <div class="label flex flex-a-c mb-m">
      <div class="h-full text pl-10 font-bold">数据概览</div>
      <div class="demo13"></div>
    </div> -->
    <a-spin class="flex flex-wrap w-full" :loading="loading">
      <ms-data-card title="用户数量" :value="amountData.userCount"></ms-data-card>
      <ms-data-card title="设备数量" :value="amountData.deviceCount" :style="2"></ms-data-card>
      <ms-data-card title="在线设备数量" :value="amountData.deviceOnlineCount" :style="3"></ms-data-card>
      <ms-data-card title="离线设备数量" :value="amountData.deviceOfflineCount" :style="4"></ms-data-card>
      <ms-data-card title="未绑定设备" :value="amountData.deviceNoUsedCount" :style="5"></ms-data-card>
      <ms-data-card title="设备异常数量" :value="amountData.deviceExceptionalCount" :style="6"></ms-data-card>
    </a-spin>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { equipmentStatistics } from '@/apis'
import { deleteEmpty } from '@/utils/common'
import dayjs from 'dayjs'

defineOptions({ name: 'equipmentStatistics' })

const loading = ref(false)
const exportLoading = ref()
const amountData = ref({
  userCount: 0, //用户数量
  deviceCount: 0, //设备数量
  deviceOnlineCount: 0, //在线设备数量
  deviceOfflineCount: 0, //离线设备数量
  deviceNoUsedCount: 0, //未绑定设备
  deviceExceptionalCount: 0 //设备异常数量
})

const listParams = reactive({
  startAt: '',
  endAt: '',
  extInfo: undefined
})

const getPreviewData = async () => {
  const res = await equipmentStatistics()
  amountData.value = res.data
  console.log()
}

getPreviewData()
</script>

<style lang="scss" scoped>
:deep(.arco-grid) {
  flex-wrap: wrap;
}
:deep(.arco-grid-item) {
  min-width: 250px;
}
:deep(.arco-alert-success) {
  padding: 14px 16px;
  border-color: rgb(var(--success-6));
  background-color: rgba(var(--success-6), 0.08);
  .arco-alert-content {
    color: rgb(var(--success-6));
    font-size: 12px;
  }
}
.collapsed-btn {
  &:hover,
  &:active {
    background: none;
  }
}
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
.label {
  color: #fff;
  .text {
    background-color: orange;
    width: 90px;
    line-height: 24px;
  }
  .demo13 {
    border: 12px solid;
    border-color: orange transparent orange orange;
    height: 0px;
    width: 0;
  }
}
</style>
